//(to use: @include formcheck();)

.checkbox-holder {

  margin: 1em 0;
  @extend %noselect;
  


  
  
  .checkbox {
    display: inline-block;
    cursor: pointer;
    padding-right: 1em;
    
    .box {
      color: color(base, foreground, text);
      background: color(indent);
      border: none;
      padding: 0.5rem;
      border-radius: 0.5rem;
      box-sizing: border-box;
      margin-right: 0.5rem;
      display: inline-block;
      vertical-align: middle;
      border: solid 2px color(base);
      pointer-events: none;
      
      svg {
        visibility: hidden;
        width: 1em;
        height: 1em;
        display: block;
        path { fill: color(base, foreground) }
      }
    }
    
    //checked
    &.checked .box svg {
      visibility: visible;
    }
    
    label {
      display: inline-block;
      pointer-events: none;
    }

    //hover label or box
    &:hover {
      .box {
        border-color: color(indent,background,outline);
      }
    }
  }
}